<template>
  <a-drawer
    :body-style="{ paddingBottom: '80px' }"
    :closable="false"
    :title="submitFlag === 'save' ?'新增号牌种类适配':'编辑号牌种类适配'"
    :visible="visible"
    :width="450"
    @close="onClose"
  >
    <a-form :form="form" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item style="display:none">
            <a-input v-decorator="['id']"/>
          </a-form-item>
          <a-form-item label="行政区划">
            <a-cascader
              v-decorator="['areasId', {rules: [{ required: true, message: '请选择行政区划' }]}]"
              :options="options"
              @focus="loadAllAreasList"
              placeholder="请选择行政区划"
              :field-names="{ label: 'name', value: 'id', children: 'children' }"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="道路名称">
            <a-input v-decorator="['roadName',{rules: [{ required: true, message: '请选择道路名称'}]}]" placeholder="请选择道路名称"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="道路编码">
            <a-input v-decorator="['roadNo',{rules: [{ required: true, message: '请输入道路编码'}]}]" placeholder="请输入道路编码"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="路口编码">
            <a-input v-decorator="['crossingNo']" placeholder="请输入路口编码"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="地点米数">
            <a-input v-decorator="['locationMeters']" placeholder="请输入地点米数"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="道路描述">
            <a-textarea v-decorator="['roadDes']" placeholder="在这里输入道路描述..."/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-popconfirm title="真的放弃编辑吗?" @confirm="onClose">
        <a-button :style="{ marginRight: '8px' }">
          取消
        </a-button>
      </a-popconfirm>
      <a-button type="primary" @click="handleSubmit">
        保存
      </a-button>
    </div>
  </a-drawer>
</template>

<script>
import pick from 'lodash.pick'
import { addRoad, findAllAreasList, editRoad } from '@/api/system'

export default {
  name: 'PlateSettingModal',
  data () {
    return {
      replaceFields: {
        children: 'children',
        label: 'name',
        value: 'id'
      },
      value: '100000',
      areaData: [],
      form: this.$form.createForm(this),
      visible: false,
      mdl: {},
      disabled: false,
      title: '添加字典数据',
      submitFlag: null,
      // 总数据（不会改变）
      dataZ: [],
      // 存放前100的数据
      frontDataZ: [],
      treePageSize: 100,
      scrollPage: 1,
      options: [],
      treeDefaultExpandAll: false
    }
  },
  created () {
    this.loadAllAreasList()
  },
  methods: {
    handleSearch (val) {
      this.valueData = val
      if (!val) {
        this.loadAllAreasList()
      } else {
        this.frontDataZ = []
        this.scrollPage = 1
        this.dataZ.forEach(item => {
          if (item.name.indexOf(val) >= 0) {
            this.frontDataZ.push(item)
          }
        })
        this.allDataZ = this.frontDataZ
        this.frontDataZ = this.frontDataZ.slice(0, 100)
      }
    },
    // 下拉框下滑事件
    handlePopupScroll (e) {
      const { target } = e
      const scrollHeight = target.scrollHeight - target.scrollTop
      const clientHeight = target.clientHeight
      // 下拉框不下拉的时候
      if (scrollHeight === 0 && clientHeight === 0) {
        this.scrollPage = 1
      } else {
        // 当下拉框滚动条到达底部的时候
        if (scrollHeight < clientHeight + 5) {
          this.scrollPage = this.scrollPage + 1
          const scrollPage = this.scrollPage// 获取当前页
          const treePageSize = this.treePageSize * (scrollPage || 1)// 新增数据量
          const newData = [] // 存储新增数据
          let max = '' // max 为能展示的数据的最大条数
          if (this.dataZ.length > treePageSize) {
            // 如果总数据的条数大于需要展示的数据
            max = treePageSize
          } else {
            // 否则
            max = this.dataZ.length
          }
          // 判断是否有搜索
          if (this.valueData) {
            this.allDataZ.forEach((item, index) => {
              if (index < max) { // 当data数组的下标小于max时
                newData.push(item)
              }
            })
          } else {
            this.dataZ.forEach((item, index) => {
              if (index < max) { // 当data数组的下标小于max时
                newData.push(item)
              }
            })
          }
          this.frontDataZ = newData // 将新增的数据赋值到要显示的数组中
        }
      }
    },
    loadAllAreasList () {
      findAllAreasList().then(res => {
        this.options = res.data
      })
    },
    add () {
      this.submitFlag = 'save'
      this.visible = true
      this.form.resetFields()
    },
    edit: function (record) {
      this.submitFlag = 'edit'
      this.mdl = Object.assign({}, record)
      this.visible = true
      this.mdl.areasId = [record.provinceId, record.cityId, record.areaId]
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.mdl, 'id', 'areasId', 'roadName', 'roadNo', 'crossingNo', 'locationMeters', 'roadDes'))
      })
    },
    onClose () {
      this.visible = false
      this.form.resetFields()
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        values.provinceId = values.areasId[0]
        values.cityId = values.areasId[1]
        values.areaId = values.areasId[2]
        if (!err) {
          if (this.submitFlag === 'save') {
            addRoad(values).then(res => {
              if (res.code === 200) {
                this.$message.success('操作成功')
                this.$emit('ok')
                this.visible = false
              }
            }).catch(res => {
              this.$message.error(((res.response || {}).data || {}).message || res.message)
            })
          } else {
            editRoad(values).then(res => {
              if (res.code === 200) {
                this.$message.success('操作成功')
                this.$emit('ok')
                this.visible = false
              }
            }).catch(res => {
              this.$message.error(((res.response || {}).data || {}).message || res.message)
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
